<!-- 生产监控看板 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox allStyleCont">
        <div class="contentTop">
          <div class="contentTopLeft">
            <div class="contentTopCont allBG">
              <div class="allTitle">
                车间概况
                <img src="@/assets/images/sckb/titlels.png" />
              </div>
              <!-- 左上内容 -->
              <left-top-info ref="leftTopInfo" />
            </div>
          </div>
          <div class="contentTopRight">
            <div class="contentTopCont allBG">
              <div class="allTitle">
                生产任务
                <img src="@/assets/images/sckb/titlels.png" />
              </div>
              <!-- 生产任务4个表格Tab -->
              <right-top-info ref="rightTopInfo" />
            </div>
          </div>
        </div>
        <div class="contentBottom">
          <ul>
            <li>
              <div class="bottomLeftEcharts allBG">
                <div class="allTitle bottomTitle">
                  人员
                  <img src="@/assets/images/sckb/titleqs.png" />
                </div>
                <!-- 人员任务/每日任务 -->
                <bottom-one-info ref="bottomOneInfo" />
              </div>
            </li>
            <li>
              <div class="bottomCenterEcharts allBG">
                <div class="allTitle bottomTitle">
                  设备
                  <img src="@/assets/images/sckb/titlezx.png" />
                </div>
                <!-- 设备任务echarts -->
                <bottom-two-info ref="bottomTwoInfo" />
              </div>
            </li>
            <li>
              <div class="bottomRightEcharts allBG">
                <div class="allTitle bottomTitle3">
                  原料、
                  <img src="@/assets/images/sckb/title.png" />
                </div>
                <bottom-three-info ref="bottomThreeInfo" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
import leftTopInfo from './components/leftTopInfo'
import rightTopInfo from './components/rightTopInfo'
import bottomOneInfo from './components/bottomOneInfo'
import bottomTwoInfo from './components/bottomTwoInfo'
import bottomThreeInfo from './components/bottomThreeInfo'
export default {
  name: 'ProMonitoring',
  components: {
    allTitle,
    leftTopInfo,
    rightTopInfo,
    bottomOneInfo,
    bottomTwoInfo,
    bottomThreeInfo
  },
  data() {
    return {
      titleName: '生产监控看板'
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['bottomOneInfo'].$refs['leftOneEchartsLine'].myChart)
        this.$refs['bottomOneInfo'].$refs['leftOneEchartsLine'].infoSize()
      if (this.$refs['bottomTwoInfo'].$refs['centerOneEchartsLine'].myChart)
        this.$refs['bottomTwoInfo'].$refs['centerOneEchartsLine'].infoSize()
      if (this.$refs['bottomThreeInfo'].$refs['rightOneEchartsLine'].myChart)
        this.$refs['bottomThreeInfo'].$refs['rightOneEchartsLine'].infoSize()
    }
    this.getInfo()
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
        this.$refs['leftTopInfo'].getFactorySurvey()
        this.$refs['rightTopInfo'].getTabInfo()
        this.$refs['bottomOneInfo'].getEcharts()
        this.$refs['bottomTwoInfo'].getEcharts()
        this.$refs['bottomThreeInfo'].getEcharts()
      }, 1000)
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1200px;
  min-height: 675px;
  .containerBox {
    position: relative;
    height: 100%;
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      overflow: hidden;
      /* 统一底部边框样式 */
      .allBG {
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 5px;
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        padding: 10px 15px;
      }
      /* 全部标题样式 */
      .allTitle {
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 5px;
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
        height: 45px;
        line-height: 45px;
        color: #8daed1;
        padding-left: 25px;
        position: relative;
        font-size: 18px;
        img {
          position: absolute;
          left: -3px;
          top: 10px;
        }
      }
      /* 底部三个标题样式 */
      .bottomTitle {
        width: 240px;
        padding-left: 15px;
      }
      .bottomTitle3 {
        width: 160px;
        padding-left: 15px;
      }
      .contentTop {
        width: 100%;
        height: 60%;
        .contentTopLeft {
          height: 100%;
          width: 33.33333%;
          float: left;
        }
        .contentTopRight {
          height: 100%;
          width: 66.66666%;
          float: left;
        }
      }
      .contentBottom {
        width: 100%;
        height: 40%;
        ul {
          overflow: hidden;
          height: 100%;
          li {
            width: 33.33333%;
            height: 100%;
            float: left;
          }
        }
      }
    }
  }
}
</style>
